import React, {memo, useCallback, useState} from 'react'
import PropTypes from 'prop-types'
import SectionHeader from '@/components/section-header'
import SectionRooms from "@/components/section-rooms";
import SectionTabs from "@/components/section-tabs";
import {SectionV2Wrapper} from "@/views/home/c-cpns/home-section-v2/style";

const HomeSectionV2 = memo((props) => {
    const {infoData} = props

    const initState = Object.keys(infoData.dest_list)[0]
    const [tabName, setTabName] = useState(initState)
    const addrTabs = infoData.dest_address?.map(item => item.name);
    const tabClick = useCallback((index, name) => {
        setTabName(name)
    }, []);
    return (
        <SectionV2Wrapper>
            <SectionHeader title={infoData.title} subTitle={infoData.subTitle}/>
            <SectionTabs tabs={addrTabs} tabClick={tabClick}></SectionTabs>
            <SectionRooms roomItems={infoData.dest_list?.[tabName]} itemWidth="33.333%"/>
        </SectionV2Wrapper>
    )
})
HomeSectionV2.propTypes = {
    infoData: PropTypes.object
}
export default HomeSectionV2